<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0, width=device-width"/>
	<title>api</title>
	<link rel="stylesheet" type="text/css" href="../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../css/common.css" />
	

</head>

<style>
html,body{
 background:#fff;
}
.w-bar {
    color: #656565;
    font-size: 14px;
    border-color: #DCDCDC;
    border-width: 0 0 1px 0;
    margin-bottom: 0;
}
.w-bar {
    display: block;
    overflow: hidden;
    position: relative;
    padding: 0 14px;
    line-height: 45px;
    color: #525252;
    margin-bottom: -1px;
    border: solid #d5d5d5;
    border-width: 1px 0;
    background: #fff;
}.m-user-bar .w-bar-label {
    color: #CCC;
}
.w-bar-label {
    width: 6em;
    float: left;
}.w-bar-input-clear {
    display: none;
    float: right;
    margin-right: -10px;
    position: relative;
       margin-top: 2px;
    width: 18px;
   
    line-height: 18px;
    font-size: 14px;
    font-family: sans-serif;
    text-align: center;
    background: #dcdcdc;
    color: #fff;
    border-radius: 100%;
    border: 10px solid #fff;
}.w-bar {
    display: block;
    overflow: hidden;
    position: relative;
    padding: 0 14px;
    line-height: 45px;
    color: #525252;
    margin-bottom: -1px;
    border: solid #d5d5d5;
    border-width: 1px 0;
    background: #fff;
}
.w-bar-control {
    overflow: hidden;
    position: relative;
}
.w-bar-input {
    width: 100%;
    height: 38px;
    line-height: 38px;
    background: none;
    border: none;
    color: #333;
    outline: none;
    padding: 0;
    margin: 0;
}
input {
    -webkit-appearance: none;
}
.w-switcher, .w-switcher:after {
    -webkit-transition: all .2s;
}
.w-switcher {
    position: relative;
    user-select: none;
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 32px;
    background: #F4F4F4;
    border: 1px solid #D5D5D5;
    border-radius: 32px;
}
.w-bar-ext {
    color: #A9A9A9;
}
.w-bar-ext {
    float: right;
    color: #a9a9a9;
}
.w-switcher:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    border-radius: 100%;
    content: "";
}
.w-switcher, .w-switcher:after {
    -webkit-transition: all .2s;
}
.w-checkBar-checked .w-switcher, .w-switcher-on {
    background: #ff0000;
    border-color: #ff0000;
}
.w-switcher, .w-switcher:after {
    -webkit-transition: all .2s;
}
 .w-bar {
    color: #656565;
    font-size: 14px;
    border-color: #DCDCDC;
    border-width: 0 0 1px 0;
    margin-bottom: 0;
}
.w-bar {
    display: block;
    overflow: hidden;
    position: relative;
    padding: 0 14px;
    line-height: 45px;
    color: #525252;
    margin-bottom: -1px;
    border: solid #d5d5d5;
    border-width: 1px 0;
    background: #fff;
}
.w-switcher {
    position: relative;
    user-select: none;
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 32px;
    background: #F4F4F4;
    border: 1px solid #D5D5D5;
    border-radius: 32px;
}
.w-checkBar-checked .w-switcher:after, .w-switcher-on:after {
    left: 28px;
}
.address_add_content span.save {
	
    display: block;
    -webkit-appearance: none;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin: 26px 14px;
    background: #FF0000;
    color: #fff;
    border: none;
    height: 40px;
    line-height: 40px;
    border-radius: 3px;
    text-align: center;
}
</style>
<body >



 	<header id='header'>
			<div class='header register'>
				<i id='back' onclick="back()"></i><h1>编辑地址</h1>
			</div>
	</header>
    <!--头部结束-->
    
    <script id="addAddress-template" type="text/x-dot-template">
    	<div class="address_add_content">
        <form method="post" name="addressForm" id="addressForm_id">           
                <div class="w-inputBar w-bar" >
                	<div class="w-bar-label">收货人</div>
                	<a class="w-bar-input-clear" style="display: none;">×</a>
	                <div class="w-bar-control">
	                <input data-pro="input" class="w-bar-input" type="text" id="username" value="{{=it.shouhuoren}}">
	                </div>
	                
                </div>
                <div class="w-inputBar w-bar" >
                	<div class="w-bar-label">手机号码</div>
                	<a class="w-bar-input-clear" style="display: none;">×</a>
	                <div class="w-bar-control">
	                <input id='tel' class="w-bar-input" type="tel" maxlength="11" value="{{=it.mobile}}">
	                </div>
                </div>
                <div class="w-inputBar w-bar" >
                	<div class="w-bar-label">邮政编码</div>
                	<a class="w-bar-input-clear" style="display: none;">×</a>
	                <div class="w-bar-control">
	                <input name='zipcode' class="w-bar-input" type="zipcode" maxlength="11" value="{{=it.youbian}}">
	                </div>
                </div>
                <div class="w-inputBar w-bar" onclick="citySelect()">
                	<div class="w-bar-label" >省市区</div>
                	<a class="w-bar-input-clear" style="display: none;">×</a>
	                <div class="w-bar-control" id='address'>
	                	{{=it.sheng}}{{=it.shi}}{{=it.xian}}
	                </div>
                </div>
                <div class="w-inputBar w-bar" >
                	<div class="w-bar-label">详细地址</div>
                	<a class="w-bar-input-clear" style="display: none;">×</a>
	                <div class="w-bar-control">
	                <input data-pro="input" class="w-bar-input" type="text" id='detail' value="{{=it.jiedao}}">
	                </div>
                </div>
                {{if(it.default=='Y'){}}
                <div class="w-checkBar w-bar w-checkBar-checked" id="check" data='{{=it.default}}' onclick="checkBox()">是否设为默认地址
                {{}else{}}
                <div class="w-checkBar w-bar " id="check" data='{{=it.default}}' onclick="checkBox()">是否设为默认地址
                {{}}}
                <div class="w-bar-ext"><b data-pro="switcher"  class="w-switcher"></b>
                <input type="checkbox"></div></div>
                <span class="save" id="saveAdd" data-tpa="1302" onclick="save()">保存</span>
       </form>
    </div>
    </script>


	<div id='buyRecord'>
		<dl id='addAddress-content'>
			<div class="address_add_content">
        <form method="post" name="addressForm" id="addressForm_id">           
                <div class="w-inputBar w-bar" >
                	<div class="w-bar-label">收货人</div>
                	<a class="w-bar-input-clear" style="display: none;">×</a>
	                <div class="w-bar-control">
	                <input data-pro="input" class="w-bar-input" type="text" id="username" value="">
	                </div>
                </div>
                <div class="w-inputBar w-bar" >
                	<div class="w-bar-label">手机号码</div>
                	<a class="w-bar-input-clear" style="display: none;">×</a>
	                <div class="w-bar-control">
	                <input id='tel' class="w-bar-input" type="tel" maxlength="11" value="">
	                </div>
                </div>
                <div class="w-inputBar w-bar" >
                	<div class="w-bar-label">邮政编码</div>
                	<a class="w-bar-input-clear" style="display: none;">×</a>
	                <div class="w-bar-control">
	                <input name='zipcode' class="w-bar-input" type="zipcode" maxlength="11" value="">
	                </div>
                </div>
                <div class="w-inputBar w-bar" onclick="citySelect()">
                	<div class="w-bar-label" >省市区</div>
                	<a class="w-bar-input-clear" style="display: none;">×</a>
	                <div class="w-bar-control" id='address'>
	                
	                </div>
                </div>
                <div class="w-inputBar w-bar" >
                	<div class="w-bar-label">详细地址</div>
                	<a class="w-bar-input-clear" style="display: none;">×</a>
	                <div class="w-bar-control">
	                <input data-pro="input" class="w-bar-input" type="text" id='detail' value="">
	                </div>
                </div>
                <div class="w-checkBar w-bar w-checkBar-checked" id="check" data='Y' onclick="checkBox()">是否设为默认地址
                <div class="w-bar-ext"><b data-pro="switcher"  class="w-switcher"></b>
                <input type="checkbox"></div></div>
                <span class="save" id="saveAdd" data-tpa="1302" onclick="save()">保存</span>
       </form>
    </div>
		</dl>
	</div>
	

</body>
	<script type="text/javascript" src="../script/zepto.min.js"></script>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/doT.min.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script>
		var province ='';
		var city = '';
		var area = '';
		var username = '';
		var mobile = '';
		var zipCode = '';
		var detail = '';
		var _default = 'Y';
		var id = '';
		var uid = '';
	apiready = function(){
	headerstatus()
		_id = api.pageParam.id;
		if(_id){
		id=_id
			edit(id)
		}
		
		uid = $api.getStorage('user').uid;
		
		
	}
	
	function edit(id){
		api.ajax({
			url: 'http://wap.jqmao.cn/getAddress/?id='+id,
	        method: 'get',
			},function(ret, err){
				if(ret){
				var a =$api.byId('addAddress-content');
				var tpl = $api.byId('addAddress-template').text;
				  var tempFn = doT.template(tpl);
				       $api.html(a,tempFn(ret));		
					
				}else{
					toast("网络出错");
				}
			})
	}
	function save(){
	
		username = $api.val($api.byId('username'));
		mobile = $api.val($api.byId('tel'));
		zipCode = $api.val($api.byId('zipCode'));
		detail = $api.val($api.byId('detail'));
		if(username==''){
			toast('收货人不能为空');
			return;
		}
		if(mobile==''){
			toast('手机号不能为空')
			return;
		}
		if(id==''){
			if(province==''){
			toast('省市区不能为空')
			return;
		}
		}
		
		if(detail==''){
			toast('详细地址不能为空')
			return;
		}
		
		api.confirm({
			    title: '确定保存',
			    msg: '亲，是否确定保存？注意设置默认地址哟！',
			    buttons: ['确定', '取消']
			}, function(ret, err){
			    var index = ret.buttonIndex;
			    if(index==1){
			    if(id==''){
			    
			    	var url = 'http://wap.jqmao.cn/addAddress';
			    	var data = {values:{uid:uid,username:username,mobile:mobile,zipcode:zipCode,detail:detail,_default:_default,province:province,city:city,area:area}};
			    }else{
			    	
			    	var url = 'http://wap.jqmao.cn/updateAddress';
			    	var data = {values:{id:id,uid:uid,username:username,mobile:mobile,zipcode:zipCode,detail:detail,_default:_default,province:province,city:city,area:area}};
			    }
			    
			    	
			    	api.ajax({
		        	url: url,
		       			 method: 'post',
		       			 data: data
                           
		    		},function(ret,err){
		    			
		    			if(ret.code==1){
		    			
			    			api.sendEvent({
							    name: 'addressreload',
							    extra: {
							        reload: true,   
							    }
							});
			    				api.closeWin();
			    				api.execScript({
		    					name:'commonHeader',
		    					frameName:'addressList',
			        			script: 'addressList('+uid+');'
	        				});
	        				
		    				//openHeader('addressList','',uid);
		    			}else if(ret['code']=='2'){
							toast('最多只能添加5个收货地址')
						}else{
		    				toast("操作失败")
		    			}
		    		})
			    }
			});
		
	}
	function checkBox(){

		var checkbox = $api.byId('check');
		var checkdata = $api.attr(checkbox, 'data');
		if(checkdata=='Y'){
		
		$api.removeCls(checkbox, 'w-checkBar-checked');
		
			_default = 'N'
			$api.attr(checkbox, 'data', 'N')
		}else{
		
			_default = 'Y';
			$api.attr(checkbox, 'data', 'Y')
			$api.addCls(checkbox, 'w-checkBar-checked');
		}
	}
	function citySelect(){
		var UIActionSelector = api.require('UIActionSelector');
		UIActionSelector.open({
		    datas: 'widget://wgt/address.json',
		    layout: {
		        row: 5, 
		        col: 3,
		        height: 30, 
		        size: 12,
		        sizeActive: 14,
		        rowSpacing: 5,
		        colSpacing: 10,
		        maskBg: 'rgba(0,0,0,0.2)',
		        bg: '#fff',
		        color: '#888',
		        colorActive: '#f00', 
		        colorSelected: '#f00'
		    },
		    animation: true,
		    cancel: {
		        text: '取消', 
		        size: 12,
		        w: 90,  
		        h: 35,
		        bg: '#fff',
		        bgActive: '#ccc',
		        color: '#888',
		        colorActive: '#fff'
		    },
		    ok: {
		        text: '确定',
		        size: 12,
		        w: 90,
		        h: 35,
		        bg: '#fff',
		        bgActive: '#ccc',
		        color: '#888',
		        colorActive: '#fff'
		    },
		    title: {
		        text: '请选择',
		        size: 12,
		        h: 44,
		        bg: '#eee',
		        color: '#888'
		    },
		    fixedOn: api.frameName
		}, function(ret, err) {
		    if (ret) {
		    
			    if(ret.eventType=='ok'){
			    	province = ret.level1;
			        city = ret.level2;
			        area = !ret.level3?'':ret.level3;
			        var address = $api.byId('address');
			       
			        	$api.html(address, ''+province+city+area);
			       
			        
			    	
			    }
			    
			    
		        
		    } else {
		        ////alert(JSON.stringify(err));
		    }
		});
	}
	
	</script>
	

</html>